<template>
  <!-- 预警决策主页-缺陷与隐患部分隐患饼图 -->
  <div class="dangerpie">
    <div class="dangerpie-top">
      <div class="dangerpie-top-info">
        <div class="infotext">隐患总数</div>
        <div class="infonumber" @click="goDefectsPage('no')">{{newhiddenDangerCount.total}}</div>
      </div>
      <div class="dangerpie-top-info">
        <div class="infotext">今日计划处理</div>
        <div class="infonumber" @click="goDefectsPage('today')">{{newhiddenDangerCount.todayTotal}}</div>
      </div>
    </div>
    <div class="dangerpie-pie">
      <v-chart :options="newOption" :auto-resize="true" @click="goDefectsPageTwo" />
    </div>
    <div class="dangerpie-bottom">
      <div class="bottom-box">
        <div class="artificial one">
          <div class="artificial-react artificial-one"></div>
          <div>主变抗短路能力不足</div>
        </div>
        <div class="artificial two">
          <div class="artificial-react artificial-two"></div>
          <div>小电流接地选线</div>
        </div>
      </div>
      <div class="bottom-box">
        <div class="artificial one">
          <div class="artificial-react artificial-three"></div>
          <div>组合电流运行环境</div>
        </div>
        <div class="artificial two">
          <div class="artificial-react artificial-four"></div>
          <div>消防系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
//loadsh
import lodash from "lodash";
interface dataList {
  name: string;
  value: string;
  itemStyle: object;
}
let colorList: Array<string> = ["#CA3834", "#CD7A26", "#115AD6"];
@Component
export default class DangerPie extends Vue {
  @Prop({ default: () => [] })
  hiddenDangerCount;
  @Prop({ default: () => {} })
  hiddenDangerStatistics;

  public dataList: dataList[] = [
    {
      name: "消防系统",
      value: "3515",
      itemStyle: {
        normal: {
          //颜色渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#29AF62" },
            { offset: 1, color: "transparent" },
          ]),
        },
      },
    },
    {
      name: "小电流接地选线",
      value: "3854",
      itemStyle: {
        normal: {
          //颜色渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#FF3939" },
            { offset: 1, color: "transparent" },
          ]),
        },
      },
    },
    {
      name: "组合电源运行环境",
      value: "3515",
      itemStyle: {
        normal: {
          //颜色渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "transparent" },
            { offset: 1, color: "#06A3F4" },
          ]),
        },
      },
    },
    {
      name: "主变抗短路能力不足",
      value: "2154",
      itemStyle: {
        normal: {
          //颜色渐变
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "transparent" },
            { offset: 1, color: "#E58B44" },
          ]),
        },
      },
    },
  ];
  // 数字跳转到缺陷二级页面
  private goDefectsPage(v: any) {
    // console.log("v:",v);
    if (v == "today") {
      let date = new Date();
      let month =
        Number(date.getMonth() + 1) < 10
          ? "0" + Number(date.getMonth() + 1)
          : Number(date.getMonth() + 1);
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let plantime = date.getFullYear() + "-" + month + "-" + day;
      // console.log("plantime:",plantime);
      this.$router.push({
        name: "dangerindex",
        params: {
          plantime: plantime,
        },
      });
    } else {
      this.$router.push({
        name: "dangerindex",
        params: {
          isHandle: "0",
        },
      });
    }
  }
  // pie跳转到缺陷二级页面
  private goDefectsPageTwo(v: any) {
    // console.log("v:",v);
    let defectsType = "";
    if (v.name == "消防系统") {
      defectsType = "消防系统";
    } else if (v.name == "小电流接地选线") {
      defectsType = "小电流接地选线";
    } else if (v.name == "组合电器运行环境") {
      defectsType = "组合电器运行环境";
    } else if (v.name == "主变抗短路能力不足") {
      defectsType = "主变抗短路能力不足";
    }
    this.$router.push({
      name: "dangerindex",
      params: {
        defectsType: defectsType,
      },
    });
  }

  get newhiddenDangerCount() {
    let hiddenDangerCount = this.hiddenDangerCount;
    return hiddenDangerCount;
  }

  get newOption() {
    let option = lodash.cloneDeep(this.option);
    let robotInspection = this.hiddenDangerStatistics;
    let hiddenDangerCount = this.hiddenDangerCount;
    let dataList = [
      {
        name: "消防系统",
        value: robotInspection.xfxt || 0,
        itemStyle: {
          normal: {
            //颜色渐变
            color: "#29AF62",
          },
        },
      },
      {
        name: "小电流接地选线",
        value: robotInspection.xdl || 0,
        itemStyle: {
          normal: {
            //颜色渐变
            color: "#FF3939",
          },
        },
      },
      {
        name: "组合电源运行环境",
        value: robotInspection.zhdq || 0,
        itemStyle: {
          normal: {
            //颜色渐变
            color: "#06A3F4",
          },
        },
      },
      {
        name: "主变抗短路能力不足",
        value: robotInspection.zbkdl || 0,
        itemStyle: {
          normal: {
            //颜色渐变
            color: "#E58B44",
          },
        },
      },
    ];
    (option as any).title.text = hiddenDangerCount.total;
    (option as any).series[0].data = dataList;
    return option;
  }

  public option: EChartOption = {
    // backgroundColor: "#060d22",
    tooltip: {
      trigger: "item",
    },
    title: {
      text: "0",
      textStyle: {
        // width: 100,
        color: "#ffffff",
        fontSize: 16,
      },
      textAlign: "center",
      left: "49%",
      top: "44%",
    },
    legend: {
      show: false,
      // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
      orient: "horizontal",
      // x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      left: "left",
      // y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
      bottom: "10%",
      itemWidth: 10, // 设置图例图形的宽
      itemHeight: 18, // 设置图例图形的高
      textStyle: {
        color: "#ffffff", // 图例文字颜色
      },
      // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
      itemGap: 5,
      data: [
        "消防系统",
        "小电流接地选线",
        "组合电源运行环境",
        "主变抗短路能力不足",
      ],
    },

    series: [
      {
        type: "pie",
        // left: '30%',
        // bottom: '30%',
        // itemStyle: {
        //   normal: {
        //     borderWidth: 5,
        //     borderColor: "#030d22",
        //   },
        // },
        radius: ["30%", "60%"],
        center: ["50%", "50%"],
        hoverAnimation: false,
        label: {
          normal: {
            formatter: function (params: any) {
              return "{white|" + params.value + "}";
            },
            rich: {
              white: {
                color: "#ffffff",
                fontSize: 15,
                // padding: [21, 0],
                align: "center",
              },
            },
          },
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 10,
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        data: [],
      },
    ],
  };
}
</script>

<style lang="scss" scoped>
.dangerpie {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &-top {
    width: 100%;
    height: 1rem;
    padding-top: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 16px;
    &-info {
      display: flex;
      // justify-content: space-around;
      .infotext {
        width: 45%;
        height: 0.26rem;
        line-height: 0.26rem;
        text-align: right;
        // background-color: gray;
      }
      .infonumber {
        width: 0.62rem;
        height: 0.26rem;
        margin-left: 0.19rem;
        text-align: center;
        line-height: 0.22rem;
        // background-color: greenyellow;
        border: 0.02rem solid #07a3b6;
        box-shadow: 0 0 0.05rem #07a3b6 inset;
      }
    }
  }
  &-bottom {
    width: 100%;
    height: 0.65rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.12rem;
    padding-bottom: 0.11rem;
    .bottom-box {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      .artificial {
        width: 46%;
        display: flex;
        line-height: 0.26rem;
        &-react {
          width: 0.15rem;
          height: 0.15rem;
          margin: 0.05rem;
        }
        &-one {
          background-color: #1466f7;
        }
        &-two {
          background-color: #fc3c2d;
        }
        &-three {
          background-color: #f79928;
        }
        &-four {
          background-color: #3cdd72;
        }
      }
      .one {
        width: 55%;
      }
      .two {
        width: 45%;
      }
    }
  }
  &-pie {
    width: 100%;
    height: calc(100% - 1.65rem);
    .echarts {
      width: 100%;
      height: 100%;
    }
  }
}
</style>